export default function BigMap(props) {
  const { scene, showBigMap } = props;
  const hotList = [
    {
      width: "170px",
      height: "180px",
      left: "0",
      top: "0",
      scene: "first",
    },
    {
      width: "170px",
      height: "180px",
      right: "0",
      bottom: "0",
      scene: "second",
    },
  ];
  return (
    <div
      className="map-big-img"
      style={{ display: showBigMap ? "flex" : "none" }}
      onClick={() => {
        props.setShowBigMap(false);
      }}
    >
      <div onClick={(e) => e.stopPropagation()}>
        <img src={require("../images/map-big.png")} alt=""></img>
        {hotList.map((item, index) => (
          <div
            key={index}
            style={{ position: "absolute", ...item }}
            onClick={(e) => {
              e.stopPropagation();
              props.onChangeScene(item.scene);
            }}
          >
            {scene === item.scene && <div className="big-fov"></div>}
          </div>
        ))}
      </div>
    </div>
  );
}
